<template>
  <div class="hi-wrap">
    <div class="gs-nav">帮助中心 > {{breadCrumbTitle}}</div>
    <div class="hi-bread">
      <!-- 常见问题汇总简介 -->
    <transition name="fade">
      <div class="hi-title-brief" v-show="isShow === -1">
        <p class="hi-beread-crumb-question">常见问题</p>
        <ul class="hi-question-lists">
          <li 
            v-for="(item,index) in titleLists" 
            :key="index"
            @click="clickQuestionLists(index)"
          >{{item.title}}
          </li>
        </ul>
      </div>
    </transition>
    <!-- 怎么涨粉 -->
  <transition name="fade">
    <div class="hi-content" v-show="isShow === 0">
      <div class="hi-content-item">
        <div class="big-title">
          <p @click="jump(-1)">{{lists1.BigTitle}}</p>
        </div>
        <div class="img-title" v-for="(v,i) in lists1.smallTitle" :key="i">
          <p class="small-title">
            {{v.title}}
          </p>
          <div class="img-box" >
            <img :src="v.img" alt="">
          </div>
        </div>
      </div>
      <div class="jump-btn">
        <div class="pre" @click="goBack(-1)">返回</div>
        <div class="next" @click="next(1)">下一步</div>
      </div>
    </div>
  </transition>
    <!-- 管理帐号 -->
    <transition  name="fade">
      <div class="hi-content" v-show="isShow === 1">
        <div class="hi-content-item">
          <div class="big-title">
            <p @click="jump(-1)">{{lists2.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists2.smallTitle" :key="i">
            <p class="small-title">
              {{v.title}}
            </p>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(0)">上一步</div>
          <div class="next" @click="next(2)">下一步</div>
        </div>
      </div>
    </transition>
    <!-- 直播带货 -->
    <transition  name="fade">
      <div class="hi-content" v-show="isShow === 2">
        <div class="hi-content-item">
          <div class="big-title">
            <p @click="jump(-1)">{{lists3.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists3.smallTitle" :key="i">
            <div class="small-title">
              {{v.title}}
            </div>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(1)">上一步</div>
          <div class="next" @click="next(3)">下一步</div>
        </div>
      </div>
    </transition>
    <!-- 主播扶持 -->
    <transition name="fade">
      <div class="hi-content" v-show="isShow === 3">
        <div class="hi-content-item">
          <div class="big-title">
            <p @click="jump(-1)">{{lists4.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists4.smallTitle" :key="i">
            <p class="small-title">
              {{v.title}}
            </p>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(2)">上一步</div>
          <div class="next" @click="next(4)">下一步</div>
        </div>
      </div>
  </transition>
    <!-- 服务内容 -->
    <transition name="fade">
      <div class="hi-content" v-show="isShow === 4">
        <div class="hi-content-item">
          <div class="big-title">
            <p @click="jump(-1)">{{lists5.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists5.smallTitle" :key="i">
            <p class="small-title">
              {{v.title}}
            </p>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(3)">上一步</div>
          <div class="next" @click="next(5)">下一步</div>
        </div>
      </div>
    </transition>
    <!-- 商品推荐 -->
    <transition name="fade">
      <div class="hi-content" v-show="isShow === 5">
        <div class="hi-content-item">
          <div class="big-title">
            <p @click="jump(-1)">{{lists6.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists6.smallTitle" :key="i">
            <p class="small-title">
              {{v.title}}
            </p>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(4)">上一步</div>
          <div class="next" @click="next(6)">下一步</div>
        </div>
      </div>
    </transition>
    <!-- 带货收益 -->
    <transition name="fade">
      <div class="hi-content" v-show="isShow === 6">
        <div class="hi-content-item">
          <div class="big-title">
             <p  @click="jump(-1)">{{lists7.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists7.smallTitle" :key="i">
            <p class="small-title">
              {{v.title}}
            </p>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(5)">上一步</div>
          <div class="next" @click="next(7)">下一步</div>
        </div>
      </div>
    </transition>
    <!-- 收益提现 -->
    <transition name="fade">
      <div class="hi-content" v-show="isShow === 7">
        <div class="hi-content-item">
          <div class="big-title">
            <p  @click="jump(-1)">{{lists8.BigTitle}}</p>
          </div>
          <div class="img-title" v-for="(v,i) in lists8.smallTitle" :key="i">
            <p class="small-title">
              {{v.title}}
            </p>
            <div class="img-box" >
              <img :src="v.img" alt="">
            </div>
          </div>
        </div>
        <div class="jump-btn">
          <div class="pre" @click="goBack(6)">上一步</div>
          <!-- <div class="next" @click="next(1)">下一步</div> -->
        </div>
      </div>
    </transition>
   </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setHelpIndex', 3)
  },
  layout: 'internalouts',
  components: {
    
  },
  data() {
    return {
      titleLists:[
        {title:'一、怎么涨粉？'},
        {title:'二、如何管理快手、抖音等多个平台的账号？'},
        {title:'三、如何挑选合适的商品进行直播带货？'},
        {title:'四、平台提供哪些对主播的扶持方法？'},
        {title:'五、除了商品供应链，平台还有其他支持服务吗？'},
        {title:'六、如何获得针对自己精准专属商品推荐呢？'},
        {title:'七、如何查看自己的带货收益？'},
        {title:'八、如何把收益提现？'},
      ],
      lists1:{
        BigTitle:'怎么涨粉',
        smallTitle:[
          {
            title:'1.点击顶部菜单“我要涨粉”，找到与你匹配的主播，与TA连麦，通过增加曝光，为自己带来更多粉丝。',
            img:require('../../assets/images/help-fans.png')
          },
          {
            title:'2.填写连麦任务内容。包括任务名称、推广日期、推广内容、指定平台、指定主播、任务预算等信息并提交。',
            img:require('../../assets/images/help-task.png')
          },
          {
            title:'3.在“任务管理-我发出的”中，可以看到已经发出的连麦任务。',
            img:require('../../assets/images/help-task-manage.png')
          },
          {
            title:'4.在“任务管理-我收到的”中，可以看到别人向你发出的连麦请求。其中任务预算为意向金额，供连麦双方合作参考。',
            img:require('../../assets/images/help-receive.png')
          },
        ],
      },
      lists2:{
        BigTitle:'管理帐号',
        smallTitle:[
          {
            title:'1.点击顶部菜单“多账号管理”，进入管理页面。再点击左侧“添加账号”，添加你的快手、抖音等平台账号。可以添加多个快手账号或多个抖音账号。',
            img:require('../../assets/images/help-multi-account.png')
          },
          {
            title:'2.可以通过左侧菜单进入相应页面，管理快手、抖音等平台的商品和订单。说明：订单信息仅限从本网站“我要卖货”所选商品产生的订单。',
            img:require('../../assets/images/help-order.png')
          },
        ],
      },
      lists3:{
        BigTitle:'直播带货',
        smallTitle:[
          {
            title:'1.点击顶部菜单“我要卖货”，进入商品库。',
            img:require('../../assets/images/help-mysale.png')
          },
          {
            title:'2.点击进入喜欢的商品详情页，再点击“我要选货”，商品就加入了左侧菜单“已选商品-我的选品”清单中。',
            img:require('../../assets/images/help-option-shop.png')
          },
          {
            title:'3.对于已经加入选货的商品，点击商品详情页“购买寄样”，可以免费寄样试用。',
            img:require('../../assets/images/help-purchase.png')
          },
          {
            title:'4.如果没有完善用户信息，则系统自动跳转用户信息页，填写机构、联系人信息后，才能申请寄样，以便按照填写的地址寄样。',
            img:require('../../assets/images/help-userinfo.png')
          },
        ],
      },
      lists4:{
        BigTitle:'主播扶持',
        smallTitle:[
          {
            title:'1.平台将给优质主播提供专业的结案报告，以便主播全面认识自己的定位和优势，有针对性改进直播体验，获得更多粉丝和订单。在“我要卖货-结案报告”中，可以查看平台提供的结案报告。',
            img:require('../../assets/images/help-live-title.png')
          },
          {
            title:'2.平台提供直播热词，每天更新当前最热门直播词汇，和粉丝互动轻轻松松，不再尬聊。在“我要卖货-直播热词”中，可以看到最新热词。',
            img:require('../../assets/images/help-live-hots.png')
          },
          {
            title:'3.平台提供聊天话题，好玩好吃好聊的内容，这里帮你全都准备好。在“我要卖货-聊天话题”中，可以看到最新聊天话题。',
            img:require('../../assets/images/help-chat-topic.png')
          },
          {
            title:'4.平台提供红人解析，详细为你讲解当红主播是怎么跃级百万粉丝千万流量的。在“我要卖货-红人解析”中，可以看到最新直播红人解析。',
            img:require('../../assets/images/help-red-people.png')
          },
        ],
      },
      lists5:{
        BigTitle:'服务内容',
        smallTitle:[
          {
            title:'如果你有自己的商品供应链，可以上传到本平台，由其他网红帮你一起带货。商品上传方式为，点击“我要供货”，填写你的商品信息，平台审核通过后，你提供的商品会显示在“我要卖货”商品库中，被其他网红看到。',
            img:require('../../assets/images/help-provide-goods.png')
          },
        ],
      },
      lists6:{
        BigTitle:'商品推荐',
        smallTitle:[
          {
            title:'1:点击右上角“账户管理-偏好设置”，点选你想推广的品类和个人兴趣爱好，平台就会针对你喜欢的内容进行商品推荐。',
            img:require('../../assets/images/help-account-preference.png')
          },
        ],
      },
      lists7:{
        BigTitle:'带货收益',
        smallTitle:[
          {
            title:'在“我的钱包”中，可以看到自己的带货情况，包括销售情况、订单明细、商品销量等信息。',
            img:require('../../assets/images/help-wallet.png')
          },
        ],
      },
      lists8:{
        BigTitle:'收益提现',
        smallTitle:[
          {
            title:'1:点击右上角“账户管理-偏好设置”，点选你想推广的品类和个人兴趣爱好，平台就会针对你喜欢的内容进行商品推荐。',
            img:require('../../assets/images/help-wallet-settle.png')
          },
        ],
      },
    }
  },
  methods: {
    clickQuestionLists(index){
      this.$store.commit('setIsShow',index)
    }, 
    goBack(index) { //上一步
      this.$store.commit('setIsShow',index)
      this.$scrollTo()
    },
    next(index) { //下一步
      this.$store.commit('setIsShow',index);
      this.$scrollTo()
    },
    jump(index) {
      this.$store.commit('setIsShow',index)
    }
  },
  computed: {
    isShow(){
      return this.$store.state.isShow;
    },
    breadCrumbTitle(){
      if(this.isShow === -1) {
        return '常见问题'
      }else if(this.isShow === 0){
        return '怎么涨粉'
      }else if(this.isShow === 1){
        return '管理帐号'
      }else if(this.isShow === 2){
        return '直播带货'
      }else if(this.isShow === 3){
        return '主播扶持'
      }else if(this.isShow === 4){
        return '服务内容'
      }else if(this.isShow === 5){
        return '商品推荐'
      }else if(this.isShow === 6){
        return '带货收益'
      }else if(this.isShow === 7){
        return '收益提现'
      }
    }
  },
  created(){
    this.$store.commit('setHelpIndex',3)
  },
  mounted(){

  },
}
</script>
<style scoped>
  .hi-bread{
    background: #fff;
    padding:0 30px 30px;
  }
  .hi-bread-crumb{
    display:flex;
    align-items: center;
    padding-top:30px;
  }
  .hi-beread-crumb-question{
    font-size: 24px;
    font-weight:bold;
    color:#333333;
    letter-spacing: 2px;
    padding-top:20px;
  }
  .hi-beread-crumb-plat{
    font-size: 14px;
    color:#bcbcbc;
    margin-left: 10px;
  }
  .hi-content{  
    font-size: 16.44px; 
    line-height:28px ;
    color:#484848;
    font-size:16px;
    font-weight:bold;
  }
  .hi-content .big-title {
    display:flex;
    align-items:center;
    height:70px;
    line-height:70px;
    font-size:24px;
    user-select:none;
    cursor: pointer;
  }
  .jump-btn{
    display: flex;
    font-weight: normal;
    /* margin-left: 60px; */
    padding: 80px 0 20px 20px;
    box-sizing:border-box;
    /* background: #f4f4f4; */
    justify-content: flex-start;
  }
  .pre,
  .next{
    width:80px;
    height:30px;
    line-height:30px;
    text-align: center;
    cursor: pointer;
    user-select:none;
    border-radius:15px;
    background: #0096e6;
    color:#ffffff;
    font-size:16px;
  }
  .pre:hover,
  .next:hover{
    background:#66B1FF;
  }
  .pre {
    margin-right:20px;
  }
  .small-title {
    padding:16px 0;
    font-weight:normal;
  }
  .img-box {
    min-width:876px;
    min-height:450px;
  }
  .img-box img {
    width:100%;
    height:100%
  }
  .hi-question-lists {
    overflow: hidden;
    margin-top:12px;
  }
  .hi-question-lists li{
    height:30px;
    line-height:30px;
    color:#555555;
    font-size:16px;
    cursor:pointer;
    border-radius:15px;
    padding:0 20px;
    margin-top:20px;
    background:#f5f5f5;
  }
  .hi-question-lists li:hover{
    color:#ffffff;
    background:linear-gradient(to right,#2aa3e4,#2ba3e4,#0f9ae5,#0096e6);
  }
  .fade-leave,
  .fade-enter-to{
    opacity:1;
  }
  .fade-leave-to,
  .fade-enter{
    opacity:0;
  }
  .fade-leave-active,
  .fade-enter-active{
    transition:all .1s ease-in-out;
  }
  .small-title:nth-child(1){
    padding-top:0;
  }
</style>
